<template>
  <div class="imgContainer">
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
      <div class="mui-scroll">
        <a class="mui-control-item mui-active">
          全部
        </a>
        <a class="mui-control-item" v-for="item in topList" :key="item.id">
          {{item.title}}
        </a>
      </div>
    </div>
    <ul class="content">
        <router-link v-for="item in imgList" :key="item.id" tag="li" :to="'/home/imginfo/'+ item.id">
            <img v-lazy="item.img_url">
            <div class="info">
                <h2 class="title">{{item.title}}</h2>
                <div class="zy">{{item.zhaiyao}}</div>
            </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import mui from '../../../node_modules/mui/js/mui.js'
import { Lazyload } from "mint-ui";

export default {
  data() {
    return {
        topList:[],
        imgList:[]
    }
  },
  methods:{
      getTopList(){
          this.$http.get('api/getimgcategory').then(res =>{
              this.topList=res.body.message
          })
      },
      getImgList(id){
          this.$http.get('api/getimages/'+id).then(res=>{
              this.imgList=res.body.message
          })
      }
  },
  created(){
      this.getTopList();
      this.getImgList(0)
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  components: {

  }
}
</script>

<style scoped lang="scss">
.imgContainer{
    .content{
        padding: 0;
        li{
            background-color: #ccc;
            list-style: none;
            margin: 4px 0;
            text-align: center;
            position: relative;
            img {
                width: 100%;
            }
            img[lazy="loading"] {
                width: 40px;
                margin: auto;
                height: 300px;
            }
            .info{
                color: #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
                text-align: left;
                .title{
                    font-size: 14px;
                }
                .zy{
                    font-size: 13px;
                    max-height: 70px;
                }
            }
        }
    }
}
</style>
